﻿@model TestOnlineProject.Models.Entities.User
@{
    ViewBag.Title = "Index";
}
<script>
    $(document).ready(function () {
        $("button[name=Edit]").click(function () {
            var role = $("#RoleId").val();
            if (role == 1) {
                $("#editEmail").html('<span>@Html.TextBoxFor(model => model.Email)</span><span class="errorMsg" id="errorEmail"></span>');
            }
            $("#editFullName").html('<span>@Html.TextBoxFor(model => model.FullName)</span><span class="errorMsg" id="errorFullName"></span>');
            $("#Edit").css("display", "none");
            $("#selectPicture").show();
            $("#Save").show();
            $("#Cancel").show();
        });

        $("button[name=Cancel]").click(function () {
            $("#editFullName").html('@Html.DisplayFor(model => model.FullName)');
            $("#editEmail").html('@Html.DisplayFor(model => model.Email)');
            $("#Edit").show();
            $("#selectPicture").hide();
            $("#Save").hide();
            $("#Cancel").hide();
        });

        $("button[name=Save]").click(function () {
            var fullname = $("#FullName").val();
            var role = $("#RoleId").val();
            if (fullname == "") {
                $("#errorFullName").html('The Full name is required!');
            } else if (role == 1) {
                var email = $("#Email").val();
                if (email == "") {
                    $("#errorEmail").html('The E-mail is required!');
                } else {
                    var con = confirm("Are you sure you want to change Info?");
                    if (con) {
                        $("#form").submit();
                    }
                }
            } else {
                var conf = confirm("Are you sure you want to change Info?");
                if (conf) {
                    $("#form").submit();
                }
            }
        });

        $('.fileinput').fileinput();
        $('#FileUpload').bind('change', function() {
            var filename = $('#FileUpload').val();
            if (filename != "") {
                var extension = filename.replace(/^.*\./, '');
                if (extension == filename) {
                    extension = '';
                } else {
                    extension = extension.toLowerCase();
                }

                switch (extension) {
                case 'jpg':
                    break;
                case 'png':
                    break;
                case 'jpeg':
                    break;
                case 'gif':
                    break;
                default:
                    alert('Please select image file type jpg, png, jpeg or gif');
                    $('.fileinput').fileinput('reset');
                }
            }
        });
    });
</script>
<div class="site_map">
    @Html.ActionLink("Home", "Index", "Home", new { }, new { })
    / Account
</div>
<div>
    @if (ViewBag.Null != null)
    {
        <script>
            alert("Your account has been Not avalaible. Please check again!");
            window.location = "./Account/Logout";
        </script>
    }
    @if (ViewBag.IsActive != null)
    {
        <script>
            alert("Your account has been Deactivated. Please contact Admin to check this!");
            window.location = "./Account/Logout";
        </script>
    }
    @if (ViewBag.Success != null)
    {
        <script>
            alert("Your Information has been change successfully!");
        </script>
    }
    <br />
    <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
            <li class="active">
                @Html.ActionLink("Overview", "Index", "Account", new { userId = @Model.UserId }, null)
            </li>
            @if (Model.RoleId != 1)
            {
                <li>
                    @Html.ActionLink("Subjects", "Subject", "Account", new { userId = @Model.UserId }, null)
                </li>
            }
            <li>
                @Html.ActionLink("Discussions", "Discussion", "Account", new { userId = @Model.UserId }, null)
            </li>
            @if (Model.UserId == int.Parse(HttpContext.Current.User.Identity.Name))
            {
                <li>
                    @Html.ActionLink("Password", "ChangePassword", "Account", new { userId = @Model.UserId }, new { })
                </li>
            }
        </ul>
        <div class="tab-content">
            <div id="info" class="tab-pane active">
                @using (Html.BeginForm("Index", "Account", FormMethod.Post, new { enctype = "multipart/form-data", id = "form" }))
                {
                    <h3 style="color: #A5CAE4; font-size: 16px; margin-bottom: 6px; border-bottom: 1px solid #D7EDFC; line-height: 1.28">
                        Avatar
                    </h3>
                    <div class="fileinput fileinput-new" data-provides="fileinput" style="padding-left: 150px">
                        <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                            @if (@Model.ImageUrl == null)
                            {
                                <img data-src="holder.js/100%x100%" alt="..." src="~/Images/default_large.png" />
                            }
                            else
                            {
                                <img data-src="holder.js/100%x100%" alt="..." src="~/Images/Profile/@Model.ImageUrl" />
                            }
                        </div>
                        <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                        <div id="selectPicture" style="display: none">
                            <span class="btn btn-default btn-file">
                                <span class="fileinput-new">Select image</span>
                                <span class="fileinput-exists">Change</span>
                                <input type="file" name="FileUpload" id="FileUpload" title="Change picture">
                            </span>
                            <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                        </div>
                    </div>
                    <h3 style="color: #A5CAE4; font-size: 16px; margin-bottom: 6px; border-bottom: 1px solid #D7EDFC; line-height: 1.28">
                        Details
                    </h3>
                    <div id="hidden" style="display: none">
                        @Html.HiddenFor(model => Model.UserId)
                        @Html.HiddenFor(model => Model.Username)
                        @Html.HiddenFor(model => Model.RoleId)
                        @Html.HiddenFor(model => Model.JoinedTime)
                        @Html.HiddenFor(model => Model.ImageUrl)
                        @if(Model.RoleId != 1)
                        {
                            @Html.HiddenFor(model => Model.Email)
                        }
                    </div>
                    <table class="table" style="padding-left: 150px; width: 50%">
                        <tr>
                            <td style="text-align: right; padding-right: 10px; border-top: none"></td>
                            <td class="errorMsg" style="text-align: left; border-top: none">
                                @Html.ValidationSummary(true)
                            </td>
                        </tr>
                        <tr style="margin: 10px auto">
                            <td style="text-align: right; padding-right: 10px; border-top: none">
                                <strong>Full name:</strong>
                            </td>
                            <td id="editFullName" style="text-align: left; border-top: none">
                                @Html.DisplayFor(model => model.FullName)
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right; padding-right: 10px; border-top: none">
                                <strong>Username:</strong>
                            </td>
                            <td style="text-align: left; border-top: none">
                                @Html.DisplayFor(model => model.Username)
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right; padding-right: 10px; border-top: none">
                                <strong>E-mail:</strong>
                            </td>
                            <td id="editEmail" style="text-align: left; border-top: none">
                                @Html.DisplayFor(model => model.Email)
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right; padding-right: 10px; border-top: none">
                                <strong>Role:</strong>
                            </td>
                            <td style="text-align: left; border-top: none">
                                @ViewBag.Role
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right; padding-right: 10px; border-top: none">
                                <strong>Join time:</strong>
                            </td>
                            <td style="text-align: left; border-top: none">
                                @Html.DisplayFor(model => model.JoinedTime)
                            </td>
                        </tr>
                    </table>
                    if (Model.UserId == int.Parse(HttpContext.Current.User.Identity.Name))
                    {
                        <div style="padding-left: 100px">
                            <button id="Edit" type="button" class="btn" name="Edit" style="width: 100px">
                                Edit</button>
                            <button id="Save" type="button" class="btn" name="Save" style="width: 100px; display: none">
                                Save</button>
                            <button id="Cancel" type="button" class="btn" name="Cancel" style="width: 100px; display: none">
                                Cancel</button>
                        </div>
                    }
                }
            </div>
        </div>
    </div>
</div>